<script setup>
import CardArea from "@/components/cardArea.vue";
import {deleteMenu, getMenuList} from "@/api/menu.js";
import {ref} from "vue";
import MyTable from "@/common/myTable.vue";
import MenuForm from "@/views/menu/menu-form.vue";
import {ElMessage, ElMessageBox} from "element-plus";

const list = ref([])

const getList = () => {
  getMenuList().then(res => {
    list.value = res.data
  })
}

//删除
const del = async (id) => {
  ElMessageBox.confirm(
      '是否删除选中菜单？',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        const {code, msg} = await deleteMenu(id)
        if (code !== 200) {
          ElMessage.error(msg)
          return
        }
        ElMessage.success(msg)
        await getList()
      })
      .catch(() => {
        ElMessage.info('已取消')
      })
}

const id = ref(0)
const type = ref('add')

const actionFlag = ref(false)

const columns = [
  {key: 'id', title: 'id'},
  {key: 'name', title: '名称'},
  {key: 'icon', title: '图标', slot: 'icon'},
  {key: 'sort', title: '排序'},
  {key: 'path', title: '路径', width: '220px'},
  {key: 'createdTime', title: '创建时间', width: '220px'},
  {key: 'action', title: '操作', width: '250px'},
]

getList()
</script>

<template>
  <!--表单操作处-->
  <el-dialog width="500" v-if="actionFlag" v-model="actionFlag"
             :before-close="() => {id=0;type='add';actionFlag = false}">
    <template #header>
      <div style="text-align: center;margin-bottom: 20px">
        <h1>{{ type === 'edit' ? '修改菜单' : '新增菜单' }}</h1>
      </div>
    </template>
    <menu-form :id="id" :type="type" @success="()=>{id=0;type='add';actionFlag = false;getList()}"></menu-form>
  </el-dialog>
  <card-area title="菜单管理">
    <el-alert title="系统提醒" type="success" :closable="false" show-icon>
      <el-space spacer=",">
        <el-link>编辑和添加后台菜单</el-link>
        <el-link @click="actionFlag = true">创建菜单</el-link>
      </el-space>
    </el-alert>
    <my-table :list="list" row-key="id" :columns="columns" :pagination="false">

      <template #icon="{row}">
        <Component :is="row.icon" style="width: 25px;height: 25px;"/>
      </template>

      <template #action="{row}">
        <el-button color="green" plain @click="() => {id=row.id;actionFlag = true}">新增</el-button>
        <el-button type="warning" plain @click="() => {id = row.id;type='edit';actionFlag = true}">编辑</el-button>
        <el-button type="danger" plain @click="del(row.id)">删除</el-button>
      </template>

    </my-table>
  </card-area>
</template>

<style scoped lang="scss">

</style>